@import '../../../assets/css/CommonStyle.scss';

.PatientMsg {
  padding: 0 m-w(30);
  height: 100%;

  .patientMsgCard {
    display: flex;
    padding: m-w(32) m-w(24);
    box-shadow: 0px 0px 30px 0px rgba(87, 82, 82, 0.1);
    border-radius: 8px;
    background: white;
    .portrait {
      width: m-w(90);
      height: m-w(90);
      border-radius: 50%;
    }
    .pmsg {
      flex: 1;
      margin-left: m-w(24);
      .msgRow {
        display: flex;
        flex: 1;

        .nameRow {
          display: flex;
          flex: 1;
          align-items: center;
          font-size: m-w(26);
          .name {
            font-size: m-w(34);
            font-weight: bold;
            color: #333;
            margin-right: m-w(40);
          }
          .sex {
            margin-right: m-w(40);
          }
          color: rgba(#333, 0.5);
          span:first-child {
            color: #333;
          }
        }
        .editAction {
          display: flex;
          flex: 1;
          justify-content: flex-end;
          color: #429cff;
          font-size: m-w(26);
        }
      }
      .codeRow {
        display: flex;
        color: #333;
        font-size: m-w(26);

        flex: 1;
        .number {
          margin-left: m-w(15);
        }
      }
      .discription {
        font-size: m-w(26);
        color: rgba($color: #333, $alpha: 0.5);
      }
      .taskMarkIcons {
        display: flex;
        flex-wrap: wrap;
        margin-top: m-h(20);
      }
    }
  }

  .groupTag {
    padding: m-w(10) m-w(20);
    background-color: rgba(66, 156, 255, 0.1);
    color: rgba($color: #333, $alpha: 0.8);
    border-radius: 8px;
    margin-right: m-w(24);
    margin-top: m-w(16);
    font-size: m-w(22);
    &:last-child {
      margin-right: m-w(0);
    }
  }
  .notiTypeContainer {
    display: flex;
    align-items: center;
    margin-top: m-w(40);
    .notiType {
      background-color: rgba($color: #429cff, $alpha: 0.1);
      border-radius: m-w(36);
      padding: m-w(14) m-w(34);
      font-weight: bold;
      font-size: m-w(30);
      color: rgba($color: #429cff, $alpha: 1);
      margin-right: m-w(32);
    }

    .notiTypeSel {
      background-color: rgba($color: #429cff, $alpha: 1);
      border-radius: m-w(36);
      padding: m-w(14) m-w(34);
      font-weight: bold;
      font-size: m-w(30);
      color: white;
      margin-right: m-w(32);
    }
    .total {
      float: right;
      line-height: m-h(64);
      color: #333;
      opacity: 0.5;
      font-size: m-w(22);
    }
  }
  .timerPickerContainer {
    display: flex;
    align-items: center;
    margin: m-w(30) 0px;

    .spaceLiner {
      display: flex;
      align-items: center;
      font-size: m-w(40);
      margin: 0px m-w(40);
    }
    .timerShow {
      color: #333;
      font-size: m-w(26);
    }
    .triangle {
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 4px solid black;
      border-right: 4px solid rgba(255, 0, 0, 0);
      border-left: 4px solid rgba(0, 0, 255, 0);
      border-bottom: 3px solid rgba(0, 0, 255, 0);
      margin-left: 6px;
    }
  }

  .notifyList {
    overflow: hidden;
    .notiItemContainer {
      box-shadow: 0px 0px 30px 0px rgba(87, 82, 82, 0.1);
      border-radius: 8px;
      background: rgba(255, 255, 255, 1);
      padding: m-w(30) m-w(20);
      margin-top: m-w(28);
      margin-bottom: m-w(28);
      .msgContent {
        padding-bottom: m-w(24);
      }
      .titleRow {
        display: flex;
        justify-content: flex-end;
        .titleMsg {
          @include nowrap-elips;

          color: #333;
          font-size: m-w(34);
          font-weight: bold;
          width: m-w(450);
          flex: 1;
        }
        .time {
          display: flex;
          justify-content: flex-end;
          margin-left: m-w(43);
        }
      }
      .typesRow {
        display: flex;
        margin-top: m-w(22);
        align-items: center;
        .typeLabel {
          display: flex;
          flex: 1;
        }
      }

      .iconRow {
        display: flex;
        align-items: center;

        .notReaded {
          color: rgba(#333, 0.2);
          margin-right: m-w(25);
        }
        .moreIcon {
          height: m-w(26);
          width: m-w(26);
        }
      }
      .visitReQtiemRow {
        display: flex;
        justify-content: space-between;
        margin-top: m-w(24);
      }
      .radioGroup {
        display: flex;
        padding-top: m-w(24);
        border-top: 1px solid rgba(#333, 0.1);
      }
    }
  }
}
